<template>
	<view>
		<template v-if="dataSource && dataSource.length">
			<view class="inforamtion" style="display: flex;" v-for="(item, index) in dataSource" :key="index">
				<view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">物料大类</view>
						<view class="rl">{{ item.provisionBroad_dictText }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">物料小类</view>
						<view class="rl">{{ item.provisionBroad_dictText }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">物料名称</view>
						<view class="rl">{{ item.materialName }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">物料编码</view>
						<view class="rl">{{ item.materialBill }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">规格型号</view>
						<view class="rl">{{ item.specification }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">领用数量</view>
						<view class="rl">{{ item.recipientsNum }}{{ item.unit_dictText }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">品牌</view>
						<view class="rl">{{ item.brand }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">供应商</view>
						<view class="rl">{{ item.computerColor }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">物料用途</view>
						<view class="rl">{{ item.computerColor }}</view>
					</view>
				</view>
				<view style="flex: 1; display: flex; align-items: center; justify-content: flex-end;">
					<u-line direction="col" length="20" margin="0 10rpx"></u-line>
					<u-icon name="trash-fill" color="#2979ff" size="20" @click="onDelete(item, index)"></u-icon>
				</view>
			</view>
		</template>
		<view v-else>
			<u-empty mode="data" text="暂无数据" icon="/static/empty/data.png"></u-empty>
		</view>
		<view style="margin: 20rpx 20rpx 0rpx 20rpx;">
			<u-button text="新增" type="primary" @click="onAdd"></u-button>
		</view>

		<!-- 弹窗表单 -->
		<u-popup :show="showPopupInput" @close="closePopupInput" :round="10">
			<view style="background-color: #ffffff; border-radius: 10px; padding: 30rpx;">
				<u--form :rules="rules" labelPosition="top" :model="model" ref="form" labelWidth="auto" :labelStyle="{
				fontSize: '14px',
				color: '#B2B2B2',
				lineHight: '20px'
			}">
					<u-form-item label="物料大类" prop="provisionBroad" :borderBottom="false" ref="item1" required>
						<view style="width:100%" @click="show1 = true">
							<u--input placeholder="请选择物料大类" suffixIcon="arrow-down-fill"
								:suffixIconStyle="{color: '#B2B2B2'}" v-model="model.provisionBroad_dictText" disabled
								disabledColor="#fff"></u--input>
						</view>
						<u-picker :show="show1" :columns="erpPurchaseCategory" keyName="categoryName"
							@cancel="show1 = false" @confirm="confirm1"></u-picker>
					</u-form-item>
					<u-form-item label="物料小类" prop="provisionSmall" :borderBottom="false" ref="item1" required>
						<view style="width:100%" @click="pickProvisionSmall">
							<u--input placeholder="请选择物料小类" suffixIcon="arrow-down-fill"
								:suffixIconStyle="{color: '#B2B2B2'}" v-model="model.provisionSmall_dictText" disabled
								:disabledColor="model.provisionBroad?'#fff':'#f5f7fa'"></u--input>
						</view>
						<u-picker :show="show2" :columns="erpPurchaseCategoryChild" keyName="categoryName"
							@cancel="show2 = false" @confirm="confirm2"></u-picker>
					</u-form-item>
					<u-form-item label="物料名称" prop="materialName" :borderBottom="false" ref="item1" required>
						<view style="width:100%" @click="pickMaterial">
							<u--input placeholder="请选择物料名称" suffixIcon="arrow-down-fill"
								:suffixIconStyle="{color: '#B2B2B2'}" v-model="model.materialName" disabled
								:disabledColor="model.provisionSmall?'#fff':'#f5f7fa'"></u--input>
						</view>
					</u-form-item>
					<u-form-item label="领用数量" prop="recipientsNum" :borderBottom="false" ref="item1" required>
						<h-money-input placeholder="请输入领用数量" v-model="model.recipientsNum"></h-money-input>
					</u-form-item>
					<u-form-item label="单位" prop="unit_dictText" :borderBottom="false" ref="item1">
						<u--input placeholder="请输入单位" :suffixIconStyle="{color: '#B2B2B2'}"
							v-model="model.unit_dictText" disabled disabledColor="#f5f7fa"></u--input>
					</u-form-item>
					<u-form-item label="供应商" prop="companName">
						<h-select-customer-input-popup style="width: 100%" v-model="model.companName" commercialType="2"
							auditStatus="2" placeholder="请选择供应商" border="surround"></h-select-customer-input-popup>
					</u-form-item>
					<u-form-item label="物料用途" prop="remark" :borderBottom="false" ref="item1">
						<u--textarea v-model="model.remark" confirmType="done" placeholder="请输入物料用途"
							:maxlength="500"></u--textarea>
					</u-form-item>
				</u--form>
				<view style="padding:20rpx 0;">
					<u-button text="确定" type="primary" @click="onConfirmPopupInput"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		erpPurchaseCategoryList, //物料大类
		erpPurchaseCategoryChildList, //物料小类
	} from '@/api/index.js'
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				showPopupInput: false, // 表单弹窗
				show1: false,
				show2: false,
				model: {
					provisionBroad: '', //物料大类id
					provisionBroad_dictText: '', //物料大类
					provisionSmall: '', //物料小类id
					provisionSmall_dictText: '', //物料小类
					id: '', //物料id
					materialName: '', //物料名称
					unit_dictText: '', //单位
					materialBill: '', //编码
					specification: '', //规格型号
					brand: '', //品牌
					recipientsNum: undefined, //领用数量
					companName: '', //供应商
					remark: '', //物料用途
				},
				rules: {
					provisionBroad: [{
						required: true,
						message: '请选择物料大类!',
						trigger: 'change'
					}],
					provisionSmall: [{
						required: true,
						message: '请选择物料小类!',
						trigger: 'change'
					}],
					id: [{
						required: true,
						message: '请选项物料名称!',
						trigger: 'change'
					}],
					recipientsNum: [{
						required: true,
						message: '请输入领用数量!',
						trigger: 'change'
					}],
				},
				dataSource: JSON.parse(JSON.stringify(this.dataList)),
				editIndex: 0, // 编辑的下标
				isEdit: false,
				erpPurchaseCategory: [], //物料大类枚举
				erpPurchaseCategoryChild: [], //物料小类枚举
				materialList: [],
			};
		},
		mounted() {
			this.getPurchaseCategoryList()
		},
		watch: {
			'model.provisionBroad'(nv, ov) {
				this.model.provisionSmall = ''
				this.model.provisionSmallTitle = ''
				if (nv) {
					this.getPurchaseCategoryChildList(nv)
				}
			},
			'model.provisionSmall'(nv, ov) {
				this.model.materialName = ''
				this.model.id = ''
			},
			dataList: {
				handler: function(val){
					this.dataSource = JSON.parse(JSON.stringify(val))
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			onAdd() {
				this.isEdit = false
				this.showPopupInput = true
			},

			pickProvisionSmall() {
				if (!this.model.provisionBroad) return
				this.show2 = true
			},
			pickMaterial() {
				if (!this.model.provisionSmall) return
				uni.navigateTo({
					url: `/pages/synergy/pickMaterialList?provisionSmall=${this.model.provisionSmall}`,

				})
			},
			// 删除
			onDelete(item, index) {
				var _this = this
				uni.showModal({
					content: '确定删除吗？',
					success(res) {
						if (res.confirm) {
							_this.dataSource.splice(index, 1);
						} else if (res.cancel) {
							// 用户点击取消
						}
					}
				})

			},
			closePopupInput() {
				this.model = {
					provisionBroad: '', //物料大类id
					provisionBroad_dictText: '', //物料大类
					provisionSmall: '', //物料小类id
					provisionSmall_dictText: '', //物料小类
					id: '', //物料id
					materialName: '', //物料名称
					unit_dictText: '', //单位
					materialBill: '', //编码
					specification: '', //规格型号
					brand: '', //品牌
					recipientsNum: undefined, //领用数量
					companName: '', //供应商
					remark: '', //物料用途
				}
				this.showPopupInput = false
			},
			onConfirmPopupInput() {
				this.model.recipientsNum = Number(this.model.recipientsNum)
				this.dataSource.push(this.model)
				// const val = await this.$refs.form.validate()
				// if (!val) return
				// if (!this.isEdit) {
				// 	this.dataSource.push(this.model)
				// } else {
				// 	this.dataSource[this.editIndex] = this.model
				// }
				this.closePopupInput()
			},
			// 确认选择物料大类
			confirm1(e) {
				this.model.provisionBroad = e.value[0].id
				this.model.provisionBroad_dictText = e.value[0].categoryName
				this.show1 = false
			},
			// 确认选择物料小类
			confirm2(e) {
				this.model.provisionSmall = e.value[0].id
				this.model.provisionSmall_dictText = e.value[0].categoryName
				this.show2 = false
			},
			getData() {
				return this.dataSource
			},
			// 选择物料大类触发
			provisionBroadChange() {
			},

			// 获取物料大类枚举
			getPurchaseCategoryList() {
				erpPurchaseCategoryList().then(res => {
					if (res.success) {
						this.erpPurchaseCategory.push(res.result || [])
					}
				})
			},
			// 获取物料小类枚举
			getPurchaseCategoryChildList(parentId) {
				this.erpPurchaseCategoryChild = []
				erpPurchaseCategoryChildList({
					parentId
				}).then(res => {
					if (res.success) {
						this.erpPurchaseCategoryChild.push(res.result || [])
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.inforamtion {
		margin-top: 10rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
	}
</style>